<template>
  <div class="box">
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <header class="header">
        <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
      </header>
      <div class="content">
        <van-tabs v-model:active="active">
          <van-tab title="全部"></van-tab>
          <van-tab title="待付款"></van-tab>
          <van-tab title="待发货"></van-tab>
        </van-tabs>
        <van-empty description="描述文字" />
        <div
          v-for="item in list"
          :key="item.id"
          @click="$router.push(`/myOrder/detail/${item.id}`)"
        >
          <van-swipe-cell>
            <van-card
              :num="item.count"
              :price="item.price"
              :title="item.title"
              :thumb="item.image"
            />
          </van-swipe-cell>
          <van-swipe-cell>
            <van-card
              v-for="el in item.orderList"
              :key="el.id"
              :num="el.count"
              :price="el.price"
              :title="el.title"
              :thumb="el.image"
            />
          </van-swipe-cell>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script setup>
import request from "@/utils/request.js";
const isLoading = ref(false);
import { onMounted, ref } from "vue";
const list = ref([]);
onMounted(() => {
  request
    .get("/list", {
      params: {
        pagination: 1,
        pageNum: 20
      }
    })
    .then(res => {
      if (res.data.code == 200) {
        list.value = res.data.data;
      }
    });
});
const onRefresh = () => {
  isLoading.value = true;
  setTimeout(() => {
    isLoading.value = false;
  }, 1000);
};
</script>